/**
 * Created by huotaol on 2017/5/19.
 */

import React, {Component} from "react";
import {Image, ScrollView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import Modal from "react-native-modal";
import Util from "../../main/Util";
import AreaSelect from "../../page/AreaSelect";
import Toast from "react-native-root-toast";
import * as Url from "../../constant/Url";
import {request} from "../../../common/util/RequestUtil";
import * as CommonUtil from "../../../common/util/Util";
import {Actions} from "react-native-router-flux";
import HelpList from "../helplook/component/HelpList";


export default class Accredit extends Component {
    // 构造
    constructor(props) {
        super(props);

        // 初始状态
        this.state = {
            isModalVisible: false,
            selectArea: null,
            date: '',
            phone: Util.getUser().phone,
            verifyCode: '',
            requestingVerifyCode: false,
            carDetail: {
                brand: '',
                series: '',
                kind: '',
            },
        };
        this._subscribe = this._subscribe.bind(this);
        this._onCarDetailSelected = this._onCarDetailSelected.bind(this);
        this._getSoldCarInfo = this._getSoldCarInfo.bind(this);
    }

    render() {
        return (
            <View style={{backgroundColor: '#86C9FF', flex: 1}}>
                <ScrollView
                >
                    <Image source={require('../../../img/accredit/background.jpg')}
                           style={{
                               width: CustomStyle.screenWidth, height: CustomStyle.getActualSizeInVertical(460),
                           }}/>
                    <View style={[styles.container]}>
                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(38),
                            color: 'black',
                            alignSelf: 'center'
                        }]}></Text>

                        <TouchableOpacity style={{
                            height: CustomStyle.getActualSizeInVertical(88),
                            width: CustomStyle.getActualSizeInHorizontal(530),
                            backgroundColor: '#FF7200',
                            alignItems: 'center',
                            justifyContent: 'center',
                            marginTop: CustomStyle.getActualSizeInVertical(50),
                            marginBottom: CustomStyle.getActualSizeInVertical(30),
                            borderRadius: CustomStyle.getActualSizeInVertical(44),
                            alignSelf: 'center',
                        }}
                                          onPress={() => {
                                              CommonUtil.callPhone(CommonUtil.OFFICIAL_PHONE_NUMBER);
                                          }}
                        >
                            <Text style={[CustomStyle.baseText, {
                                fontSize: CustomStyle.getActualFontSize(36),
                                color: 'white',
                            }]}>立即预约</Text>
                        </TouchableOpacity>
                        <HelpList title={'质保细则'} numberTextList={HELP_LIST}/>
                    </View>
                </ScrollView>
                <TouchableWithoutFeedback onPress={() => {
                    this.setState({isModalVisible: false});
                }}>
                    <Modal isVisible={this.state.isModalVisible}
                           backdropOpacity={0.65}
                           style={{
                               justifyContent: 'flex-end',
                               margin: 0,
                           }}
                    >
                        <AreaSelect
                            selectArea={this.state.selectArea}
                            onPress={(area) => {
                                this.setState({isModalVisible: false, selectArea: area,});
                            }}/>
                    </Modal>
                </TouchableWithoutFeedback>
                <TouchableOpacity
                    style={[, {
                        position: 'absolute',
                        left: CustomStyle.getActualSizeInHorizontal(20),
                        top: CustomStyle.navBasePaddingTop + CustomStyle.getActualSizeInVertical(20),
                    }]}
                    onPress={() => {
                        Actions.pop();
                    }}
                >
                    <Image source={require('../../../img/cardetail/back.png')}
                           resizeMode={'contain'}
                           style={{
                               width: CustomStyle.getActualSizeInHorizontal(60),
                               height: CustomStyle.getActualSizeInVertical(60),
                           }}/>
                </TouchableOpacity>
            </View>
        );
    }

    /*loc	卖车所在地	是	string
     date	上牌时间  yyyy年MM月	是	string
     phone	手机号	是	string
     code	验证码	是	string
     text	车辆信息文本  品牌+车系+车型	是	string	*/
    _subscribe() {
        const {selectArea, date, phone, verifyCode} = this.state;
        if (selectArea && date && phone && verifyCode) {
            const url = Url.BASE_URL + '/sellcar/collect_car_info';
            const param = new FormData();
            param.append('loc', selectArea.name);
            param.append('date', date);
            param.append('phone', phone);
            param.append('code', verifyCode);
            param.append('text', this._getSoldCarInfo());
            request(url, 'post', param).then(json => {
                this.setState({
                    selectArea: null,
                    date: '',
                    phone: Util.getUser().phone,
                    verifyCode: '',
                    requestingVerifyCode: false,
                });
                Toast.show('预约成功', {
                    duration: Toast.durations.SHORT,
                    position: Toast.positions.CENTER
                });
            }).catch(err => {
                Toast.show(err, {
                    duration: Toast.durations.SHORT,
                    position: Toast.positions.CENTER
                });
            });
        }
    }

    _onCarDetailSelected(brand, series, kind) {
        this.setState({carDetail: {brand, series, kind}});
    }

    _getSoldCarInfo() {
        const {brand, series, kind} = this.state.carDetail;
        const detail = series + kind;
        return detail ? detail : '车辆信息';
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderRadius: CustomStyle.getActualSizeInVertical(20),
        marginLeft: CustomStyle.getActualSizeInHorizontal(16),
        marginRight: CustomStyle.getActualSizeInHorizontal(16),
        marginBottom: CustomStyle.getActualSizeInVertical(16),
        paddingBottom: CustomStyle.getActualSizeInVertical(40),
    },
    itemContainer: {
        height: CustomStyle.getActualSizeInVertical(88),
        backgroundColor: '#FFF8D5',
        borderRadius: CustomStyle.getActualSizeInVertical(4),
        marginTop: CustomStyle.getActualSizeInVertical(40),
        flex: 1,
        paddingLeft: CustomStyle.getActualSizeInHorizontal(20),
        paddingRight: CustomStyle.getActualSizeInHorizontal(20),
        marginLeft: CustomStyle.getActualSizeInHorizontal(20),
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: CustomStyle.getActualSizeInHorizontal(20),
    },
    itemText: {
        fontSize: CustomStyle.getActualFontSize(36),
        color: '#b2a682',
    },
});

const HELP_LIST = [
    {
        number: '01',
        title: '二手车质保的含义',
        content: '指消费者所购买的汽车产品，在制造商提供的保质期和服务范围之外， 由质保服务商所提供的延长保修时间、服务范围、或者衍生服务的有偿服务。'
    },
    {
        number: '02',
        title: '二手车质保的含义',
        content: '2、1年2万KM，以先到为准'
    },
    {
        number: '03',
        title: '承保范围',
        content: '发动机、变速器'
    },
    {
        number: '04',
        title: '最高赔付上限',
        content: '2万人民币'
    },
    {
        number: '05',
        title: '购买本延保产品的汽车，必须满足以下所有条件',
        content: '• 车龄在8年以内（以登记证为准），累计行驶里程不超过18万公里；' +
        '\n• 车辆用途为非营运乘用车（车主需承诺无营运记录）；' +
        '\n• 车辆荷载人数≤7人；' +
        '\n• 车辆需通过CIAS”行认证质保检测项目检测' +
        '\n• 购买产品时需提供并核实以下资料：' +
        '\n    -车辆检测单；' +
        '\n    -车辆行驶证；' +
        '\n    -车主身份证（正反两面）；' +
        '\n    -有效期内的交强险保单；' +
        '\n    -最近一次保养记录（新车除外）' +
        '\n• 车辆为非事故车、泡水车、火烧车；' +
        '\n• 车辆无结构性损伤。'
    },
    {
        number: '06',
        title: '如何购买和享受车行家的汽车延保服务',
        content: '1）延保购买' +
        '\n      您可根据车辆状况，进行车辆检测及提供相关证明文件，，即可直接进行延保产品的选购' +
        '\n2）延保生效 ' +
        '\n      签订延保服务 协议并进行激活；  到达协议生效的时间 点，即自动开始生效' +
        '\n3）车辆维修' +
        '\n      在质保期内，如果车辆不能正常使用拨打4006161677 ，车行家人员为您安排车辆救援和维修，车行家的授权维修网点将对车辆进行故障分析，符合条款，车行家承担维修费用' +
        '\n4）费用支付' +
        '\n      车辆维修完毕后，客户直接去服务网点提车，符合延保服务条款，车行家向维修网点支付最高2万人民币的相关费用，客户无需支付任何费用。'
    },
];